<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <style type="text/css">
      .btn{
        margin: 5px;
      }
      .btn-block{
        margin: 5px 0;
      }
    </style>
    
  </head>
  <body>

    <div data-role="page" data-theme="a">
      
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
          <div class="nav">
            <a data-ajax="false" href="../menus.html" 
               class="nav-link back"> 首页</a>
            <h3 class="nav-title">Button</h3>
          </div>
        </div>
      <div role="main" class="card-list">

        

        <div class="card card-square">
            <div class="card-header">jQuery mobile按钮</div>
            <div class="card-content">
              <a data-ajax="false" href="old.html" class="btn btn-sm btn-square btn-hollow blue"> 查看 <i class="far fa-list-ul"></i></a>
            </div>
        </div>
        
        <div class="card card-square">
          <div class="card-header">普通按钮</div>
          <div class="card-content">
            <button data-role="none" class="btn blue" type="button">Button</button>
            <button data-role="none" class="btn green" type="button">Button</button>
            <button data-role="none" class="btn yellow" type="button">Button</button>
            <button data-role="none" class="btn orange" type="button">Button</button>
            <button data-role="none" class="btn pink" type="button">Button</button>
            <button data-role="none" class="btn red" type="button">Button</button>
            <button data-role="none" class="btn purple" type="button">Button</button>
            <button data-role="none" class="btn teal" type="button">Button</button>
            <button data-role="none" class="btn lime" type="button">Button</button>
            <button data-role="none" class="btn grey" type="button">Button</button>
            <button data-role="none" class="btn black" type="button">Button</button>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">镂空按钮</div>
          <div class="card-content">
            <button data-role="none" class="btn btn-hollow blue" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow green" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow yellow" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow orange" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow pink" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow red" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow purple" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow teal" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow lime" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow grey" type="button">Button</button>
            <button data-role="none" class="btn btn-hollow black" type="button">Button</button>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">填充按钮</div>
          <div class="card-content">
            <button data-role="none" class="btn btn-fill blue" type="button">Button</button>
            <button data-role="none" class="btn btn-fill green" type="button">Button</button>
            <button data-role="none" class="btn btn-fill yellow" type="button">Button</button>
            <button data-role="none" class="btn btn-fill orange" type="button">Button</button>
            <button data-role="none" class="btn btn-fill pink" type="button">Button</button>
            <button data-role="none" class="btn btn-fill red" type="button">Button</button>
            <button data-role="none" class="btn btn-fill purple" type="button">Button</button>
            <button data-role="none" class="btn btn-fill teal" type="button">Button</button>
            <button data-role="none" class="btn btn-fill lime" type="button">Button</button>
            <button data-role="none" class="btn btn-fill grey" type="button">Button</button>
            <button data-role="none" class="btn btn-fill black" type="button">Button</button>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">块状按钮</div>
          <div class="card-content">
            <button data-role="none" class="btn btn-fill btn-block blue" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block green" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block yellow" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block orange" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block pink" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block red" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block purple" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block teal" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block lime" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block grey" type="button">Button</button>
            <button data-role="none" class="btn btn-fill btn-block black" type="button">Button</button>
          </div>
        </div>
        
        <div class="card card-square">
          <div class="card-header">按钮大小</div>
          <div class="card-content">
              <button data-role="none" class="btn btn-sm btn-hollow teal" type="button"><i class="fas fa-times"></i> 小按钮</button>
            <button data-role="none" class="btn btn-fill blue" type="button">普通按钮</button>
            <a data-role="none" class="btn btn-hollow btn-md red">中等按钮</a>
            <a data-role="none" class="btn btn-hollow btn-lg green">这是大按钮</a>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">带图标的按钮</div>
          <div class="card-content">
            <button data-role="none" class="btn btn-fill blue" type="button"><i class="fas fa-plus"></i> 添加</button>
            <a data-role="none" class="btn btn-fill green"><i class="fas fa-spinner"></i> 提交中</a>
            <a data-role="none" class="btn btn-fill red"><i class="fas fa-trash"></i> 删除</a>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">按钮禁用</div>
          <div class="card-content">
              <button data-role="none" class="btn blue disabled" onclick="alert(1);">Button</button>
              <button data-role="none" class="btn btn-hollow yellow disabled" onclick="alert(1);">Button</button>
              <button data-role="none" class="btn btn-fill red disabled" onclick="alert(1);">Button</button>
              <button data-role="none" class="btn btn-fill btn-block btn-md blue disabled" onclick="alert(1);"><i class="fas fa-spinner"></i> 提交中</button>
          </div>
        </div>

        <div class="card card-square">
          <div class="card-header">无圆角按钮</div>
          <div class="card-content">
              <button data-role="none" class="btn blue btn-hollow btn-md btn-square">Button</button>
              <button data-role="none" class="btn red btn-fill btn-md btn-square">Button</button>
          </div>
        </div>

      </div>

    </div>

  </body>
</html>